<template>
  <div class="weapon-import">
    <div class="page-header">
      <div class="page-title">武器装备数据录入</div>
      <el-tooltip :content="sidebarCollapsed ? '显示侧边栏' : '隐藏侧边栏'" placement="left">
        <el-button 
          :icon="sidebarCollapsed ? Expand : Fold" 
          circle
          @click="sidebarCollapsed = !sidebarCollapsed"
        />
      </el-tooltip>
    </div>

    <el-row :gutter="20">
      <el-col :xs="24" :lg="sidebarCollapsed ? 24 : 16">
    <div class="page-card">
          <h3>录入装备信息</h3>
          
          

          <el-form
            ref="formRef"
            :model="formData"
            :rules="rules"
            label-width="120px"
            label-position="left"
          >
            <el-form-item label="装备名称" prop="name">
              <el-input
                v-model="formData.name"
                placeholder="请输入装备名称，如：F-35 闪电II战斗机"
                maxlength="500"
                show-word-limit
              />
            </el-form-item>

            <el-form-item label="数据来源" prop="dataSource">
              <el-input
                v-model="formData.dataSource"
                placeholder="选填，如：维基百科、官方网站等"
                maxlength="255"
              />
            </el-form-item>

            <el-form-item label="装备介绍" prop="description">
              <div class="markdown-editor-container">
                <!-- 工具栏 -->
                <div class="markdown-toolbar">
                  <el-button-group>
                    <el-button size="small" @click="insertMarkdown('heading', 1)" title="一级标题">
                      <el-icon><TrophyBase /></el-icon> H1
                    </el-button>
                    <el-button size="small" @click="insertMarkdown('heading', 2)" title="二级标题">
                      <el-icon><Menu /></el-icon> H2
                    </el-button>
                    <el-button size="small" @click="insertMarkdown('heading', 3)" title="三级标题">H3</el-button>
                  </el-button-group>

                  <el-divider direction="vertical" />

                  <el-button-group>
                    <el-button size="small" @click="insertMarkdown('bold')" title="粗体">
                      <strong>B</strong>
                    </el-button>
                    <el-button size="small" @click="insertMarkdown('italic')" title="斜体">
                      <em>I</em>
                    </el-button>
                  </el-button-group>

                  <el-divider direction="vertical" />

                  <el-button-group>
                    <el-button size="small" @click="insertMarkdown('ul')" title="无序列表">
                      <el-icon><List /></el-icon>
                    </el-button>
                    <el-button size="small" @click="insertMarkdown('ol')" title="有序列表">
                      <el-icon><Tickets /></el-icon>
                    </el-button>
                  </el-button-group>

                  <el-divider direction="vertical" />

                  <el-button-group>
                    <el-button size="small" @click="insertMarkdown('table')" title="插入表格">
                      <el-icon><Grid /></el-icon> 表格
                    </el-button>
                    <el-button size="small" @click="insertMarkdown('quote')" title="引用">
                      <el-icon><ChatDotRound /></el-icon>
                    </el-button>
                    <el-button size="small" @click="insertMarkdown('code')" title="代码块">
                      <el-icon><DocumentCopy /></el-icon>
                    </el-button>
                    <el-button size="small" @click="insertMarkdown('hr')" title="分割线">
                      <el-icon><Minus /></el-icon>
                    </el-button>
                  </el-button-group>

                  <el-divider direction="vertical" />

                  <el-button-group>
                    <el-button size="small" @click="insertTemplate('basic')" type="primary" plain>
                      插入基本模板
                    </el-button>
                    <el-button size="small" @click="insertTemplate('full')" type="success" plain>
                      插入完整模板
          </el-button>
                  </el-button-group>
                </div>

                <!-- 左右分屏 -->
                <div class="markdown-split-view">
                  <!-- 左侧：编辑区 -->
                  <div class="editor-panel">
                    <div class="panel-header">
                      <span>编辑</span>
                      <el-icon><Edit /></el-icon>
                    </div>
                    <el-input
                      ref="textareaRef"
                      v-model="formData.description"
                      type="textarea"
                      :rows="20"
                      placeholder="请输入装备介绍（支持 Markdown 格式）&#10;提示：使用上方工具栏可快速插入格式"
                      show-word-limit
                      class="editor-textarea"
                    />
                  </div>

                  <!-- 右侧：预览区 -->
                  <div class="preview-panel">
                    <div class="panel-header">
                      <span>实时预览</span>
                      <el-icon><View /></el-icon>
                    </div>
                    <div
                      class="markdown-preview"
                      v-html="renderMarkdown(formData.description)"
                    ></div>
                  </div>
                </div>
              </div>
            </el-form-item>

            <el-form-item>
              <el-button
                type="primary"
                :loading="submitting"
                @click="handleSubmit"
              >
                提交录入
              </el-button>
              <el-button @click="handleReset">重置</el-button>
            </el-form-item>
          </el-form>

          <!-- 录入结果 -->
          <el-alert
            v-if="submitResult"
            :title="submitResult.success ? '✓ 录入成功' : '✗ 录入失败'"
            :type="submitResult.success ? 'success' : 'error'"
            :closable="true"
            @close="submitResult = null"
            style="margin-top: 20px"
          >
            <p>{{ submitResult.message }}</p>
            <p v-if="submitResult.success && submitResult.id">记录ID: {{ submitResult.id }}</p>
          </el-alert>
        </div>
      </el-col>

      <el-col :xs="24" :lg="8" v-show="!sidebarCollapsed" class="sidebar-col">
        <div class="page-card collapsible-card" style="margin-top: 0px;">
          <div class="card-header" @click="recentCollapsed = !recentCollapsed">
            <h3>最近录入</h3>
            <el-icon class="collapse-icon" :class="{ 'collapsed': recentCollapsed }">
              <ArrowDown />
            </el-icon>
          </div>
          <el-collapse-transition>
            <div v-show="!recentCollapsed" class="card-content" v-loading="loadingRecent">
              <el-empty
                v-if="!recentImports || recentImports.length === 0"
                description="暂无录入记录"
                :image-size="120"
              />
              <div v-else class="recent-list">
                <div
                  v-for="item in recentImports"
                  :key="item.id"
                  class="recent-item"
                >
                  <div class="item-name">{{ item.name }}</div>
                  <div class="item-meta">
                    <span v-if="item.data_source" class="item-source">{{ item.data_source }}</span>
                    <span class="item-time">{{ formatDateTime(item.created_at) }}</span>
                  </div>
                </div>
      </div>
    </div>
          </el-collapse-transition>
        </div>
        
        <div class="page-card collapsible-card">
          <div class="card-header" @click="markdownHelpCollapsed = !markdownHelpCollapsed">
            <h3>Markdown 语法参考</h3>
            <el-icon class="collapse-icon" :class="{ 'collapsed': markdownHelpCollapsed }">
              <ArrowDown />
            </el-icon>
          </div>
          <el-collapse-transition>
            <div v-show="!markdownHelpCollapsed" class="card-content markdown-help">
              <h4># 一级标题</h4>
              <h4>## 二级标题</h4>
              <h4>### 三级标题</h4>
              <p><strong>**粗体**</strong></p>
              <p><em>*斜体*</em></p>
              <p>- 无序列表项</p>
              <p>1. 有序列表项</p>
              <p>&gt; 引用文字</p>
              <p>`代码`</p>
              <p>---</p>
              <small>分割线</small>
            </div>
          </el-collapse-transition>
        </div>

        
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Edit, View, ArrowDown, Expand, Fold } from '@element-plus/icons-vue'
import { weaponApi } from '@/api/weapon'
import { marked } from 'marked'
import DOMPurify from 'dompurify'

const formRef = ref()
const textareaRef = ref()
const submitting = ref(false)
const submitResult = ref(null)
const loadingRecent = ref(false)
const recentImports = ref([])
const recentCollapsed = ref(false)
const markdownHelpCollapsed = ref(false)
const sidebarCollapsed = ref(true)

const formData = reactive({
  name: '',
  dataSource: '简式',
  description: ''
})

const rules = {
  name: [
    { required: true, message: '请输入装备名称', trigger: 'blur' },
    { min: 2, max: 500, message: '长度在 2 到 500 个字符', trigger: 'blur' }
  ],
  description: [
    { required: true, message: '请输入装备介绍', trigger: 'blur' },
    { min: 10, message: '介绍内容至少 10 个字符', trigger: 'blur' }
  ]
}

// 渲染 Markdown
const renderMarkdown = (markdown) => {
  if (!markdown) return '<p class="empty-text">暂无内容</p>'
  
  try {
    // 配置 marked
    marked.setOptions({
      breaks: true,
      gfm: true
    })
    
    const html = marked.parse(markdown)
    // 使用 DOMPurify 清理 HTML，防止 XSS
    return DOMPurify.sanitize(html)
  } catch (error) {
    console.error('Markdown 渲染失败:', error)
    return '<p class="error-text">Markdown 格式错误</p>'
  }
}

// 提交表单
const handleSubmit = async () => {
  if (!formRef.value) return

  try {
    await formRef.value.validate()
  } catch (error) {
    ElMessage.warning('请完善表单信息')
    return
  }

  submitting.value = true
  submitResult.value = null

  try {
    const result = await weaponApi.importWeapon(formData)
    submitResult.value = result

    if (result.success) {
      ElMessage.success('录入成功')
      handleReset()
      // 刷新最近录入列表
      await loadRecentImports()
    } else {
      ElMessage.error(result.message || '录入失败')
    }
  } catch (error) {
    ElMessage.error('录入失败: ' + error.message)
    submitResult.value = {
      success: false,
      message: error.message
    }
  } finally {
    submitting.value = false
  }
}

// 组件挂载时加载最近录入记录
onMounted(() => {
  loadRecentImports()
})

// 重置表单
const handleReset = () => {
  formRef.value?.resetFields()
  formData.name = ''
  formData.dataSource = ''
  formData.description = ''
}

// 加载最近录入记录
const loadRecentImports = async () => {
  loadingRecent.value = true
  try {
    const result = await weaponApi.getRecentImports(10)
    if (result.success) {
      recentImports.value = result.data
    }
  } catch (error) {
    console.error('加载最近录入记录失败:', error)
  } finally {
    loadingRecent.value = false
  }
}

// 格式化日期时间
const formatDateTime = (dateStr) => {
  if (!dateStr) return ''
  const date = new Date(dateStr)
  const now = new Date()
  const diff = now - date
  const seconds = Math.floor(diff / 1000)
  const minutes = Math.floor(seconds / 60)
  const hours = Math.floor(minutes / 60)
  const days = Math.floor(hours / 24)

  if (days > 0) {
    return `${days}天前`
  } else if (hours > 0) {
    return `${hours}小时前`
  } else if (minutes > 0) {
    return `${minutes}分钟前`
  } else {
    return '刚刚'
  }
}

// 插入Markdown格式
const insertMarkdown = (type, level = 1) => {
  const textarea = textareaRef.value?.textarea
  if (!textarea) return

  const start = textarea.selectionStart
  const end = textarea.selectionEnd
  const selectedText = formData.description.substring(start, end)
  const beforeText = formData.description.substring(0, start)
  const afterText = formData.description.substring(end)

  let insertText = ''
  let cursorOffset = 0

  switch (type) {
    case 'heading':
      const hashes = '#'.repeat(level)
      if (selectedText) {
        insertText = `${hashes} ${selectedText}`
        cursorOffset = insertText.length
      } else {
        insertText = `${hashes} 标题文字`
        cursorOffset = hashes.length + 1
      }
      break

    case 'bold':
      if (selectedText) {
        insertText = `**${selectedText}**`
        cursorOffset = insertText.length
      } else {
        insertText = '**粗体文字**'
        cursorOffset = 2
      }
      break

    case 'italic':
      if (selectedText) {
        insertText = `*${selectedText}*`
        cursorOffset = insertText.length
      } else {
        insertText = '*斜体文字*'
        cursorOffset = 1
      }
      break

    case 'ul':
      insertText = selectedText 
        ? selectedText.split('\n').map(line => `- ${line}`).join('\n')
        : '- 列表项1\n- 列表项2\n- 列表项3'
      cursorOffset = insertText.length
      break

    case 'ol':
      insertText = selectedText
        ? selectedText.split('\n').map((line, i) => `${i + 1}. ${line}`).join('\n')
        : '1. 列表项1\n2. 列表项2\n3. 列表项3'
      cursorOffset = insertText.length
      break

    case 'table':
      insertText = '| 列1 | 列2 | 列3 |\n| --- | --- | --- |\n| 内容1 | 内容2 | 内容3 |\n| 内容4 | 内容5 | 内容6 |'
      cursorOffset = insertText.length
      break

    case 'quote':
      insertText = selectedText
        ? selectedText.split('\n').map(line => `> ${line}`).join('\n')
        : '> 引用文字'
      cursorOffset = insertText.length
      break

    case 'code':
      insertText = '```\n代码内容\n```'
      cursorOffset = 4
      break

    case 'hr':
      insertText = '\n---\n'
      cursorOffset = insertText.length
      break
  }

  formData.description = beforeText + insertText + afterText

  // 设置光标位置
  setTimeout(() => {
    const newPosition = start + cursorOffset
    textarea.focus()
    textarea.setSelectionRange(newPosition, newPosition)
  }, 0)
}

// 插入模板
const insertTemplate = (type) => {
  if (formData.description && !confirm('这将替换当前内容，确定继续吗？')) {
    return
  }

  if (type === 'basic') {
    formData.description = `# 基本信息

**原产国**：美国
**装备分类**：战斗机
**承包商**：洛克希德·马丁公司
**服役时间**：2015年

## 概述
（简要描述装备的基本情况）

# 技术参数

## 尺寸与重量
- 机长：15.67米
- 翼展：10.7米
- 机高：4.38米
- 最大起飞重量：31,800千克

## 性能
- 最大速度：1.6马赫
- 作战半径：1,093公里
- 实用升限：15,240米

## 武器系统
- 机炮：25mm GAU-22/A
- 导弹：...

# 使用情况

## 主要用户
- **美国**：美国空军、海军、海军陆战队
- **英国**：英国皇家空军、海军
- **日本**：日本航空自卫队

## 订单数量
- 美国：约1,700架
- 英国：138架
- 日本：147架`
  } else if (type === 'full') {
    formData.description = `![F-35战斗机](https://example.com/f35.jpg)

# 基本信息

**原产国**：美国
**装备分类**：战斗机
**中文名称**：F-35闪电II战斗机
**英文名称**：F-35 Lightning II
**承包商**：洛克希德·马丁公司
**服役时间**：2015年
**状态**：在役

## 概述
F-35"闪电II"是美国洛克希德·马丁公司研制的第五代隐身多用途战斗机，是世界上最先进的战斗机之一。

> 提示：第一张图片会被自动提取为缩略图

---

# 研制背景

20世纪90年代，美国国防部启动联合攻击战斗机（JSF）计划，旨在研制一款能够满足美国空军、海军和海军陆战队以及盟国需求的新一代战斗机。

---

# 建造沿革

## 研发阶段
- 1996年：JSF项目启动
- 2001年：洛克希德·马丁方案胜出
- 2006年：首架原型机首飞

## 生产阶段
- 2007年：开始低速初始生产
- 2019年：开始全速生产

---

# 服役历程

## 服役时间线
- 2015年7月：F-35B在美国海军陆战队形成初始作战能力
- 2016年8月：F-35A在美国空军形成初始作战能力
- 2019年2月：F-35C在美国海军形成初始作战能力

## 实战经历
- 2018年：以色列空军首次在实战中使用F-35
- 2019年：美国海军陆战队在中东地区部署F-35

---

# 结构特征

## 气动布局
采用常规气动布局，带边条翼、梯形翼和倾斜双垂尾。

## 隐身设计
- 机体采用隐身外形设计
- 武器内置于机身弹舱
- 涂覆雷达吸波材料

---

# 技术参数

## 尺寸与重量
| 参数 | 数值 |
|------|------|
| 机长 | 15.67米 |
| 翼展 | 10.7米 |
| 机高 | 4.38米 |
| 空重 | 13,290千克 |
| 最大起飞重量 | 31,800千克 |

## 性能指标
| 参数 | 数值 |
|------|------|
| 最大速度 | 1.6马赫 |
| 巡航速度 | 0.95马赫 |
| 作战半径 | 1,093公里 |
| 航程 | 2,220公里 |
| 实用升限 | 15,240米 |
| 推重比 | 0.87 |

---

# 配备装备

## 武器系统
- **机炮**：25mm GAU-22/A机炮（F-35A、B：220发，F-35C：外挂吊舱）
- **空对空导弹**：AIM-120 AMRAAM、AIM-9X响尾蛇
- **空对地武器**：GBU-31 JDAM、GBU-12铺路II、AGM-154 JSOW

## 航电系统
- AN/APG-81有源相控阵雷达
- 分布式孔径系统（DAS）
- 光电瞄准系统（EOTS）

---

# 动力系统

**发动机型号**：普惠F135涡扇发动机
**推力**：
- 最大推力：128千牛
- 加力推力：191千牛

---

# 使用情况

## 美国
- **运营商**：美国空军、海军、海军陆战队
- **装备型号**：F-35A/B/C
- **订单数量**：约1,700架

## 英国
- **运营商**：英国皇家空军、海军
- **装备型号**：F-35B
- **订单数量**：138架

## 日本
- **运营商**：日本航空自卫队
- **装备型号**：F-35A/B
- **订单数量**：147架

## 其他国家
- 以色列：50架
- 意大利：90架
- 澳大利亚：72架
- 挪威：52架
- 韩国：40架`
  }

  ElMessage.success('模板已插入')
}
</script>

<style lang="scss" scoped>
.weapon-import {
  padding-bottom: 20px;

  .page-card {
    padding: 18px;
    
    h3 {
      margin-top: 0;
      margin-bottom: 15px;
    }
  }

  :deep(.el-form-item) {
    margin-bottom: 18px;
  }

  :deep(.el-form-item:last-child) {
    margin-bottom: 0;
  }

  .page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;

    .page-title {
      margin: 0;
    }

    .el-button {
      transition: all 0.3s ease;
      
      &:hover {
        transform: scale(1.1);
      }
    }
  }

  .sidebar-col {
    transition: all 0.3s ease;
  }

  .markdown-editor-container {
    width: 100%;
    border: 1px solid var(--el-border-color);
    border-radius: 4px;
    overflow: hidden;

    .markdown-toolbar {
      padding: 10px 15px;
      background-color: #fafafa;
      border-bottom: 1px solid var(--el-border-color);
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;

      .el-divider--vertical {
        height: 24px;
        margin: 0 4px;
      }

      .el-button {
        padding: 5px 10px;
      }

      strong, em {
        font-size: 14px;
      }
    }

    .markdown-split-view {
      display: flex;
      height: 520px;
      max-height: calc(100vh - 350px);

      .editor-panel,
      .preview-panel {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }

      .editor-panel {
        border-right: 1px solid var(--el-border-color);
      }

      .panel-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 15px;
        background-color: #f5f7fa;
        border-bottom: 1px solid var(--el-border-color);
        font-size: 13px;
        font-weight: 600;
        color: #606266;

        .el-icon {
          font-size: 16px;
          color: #909399;
        }
      }

      .editor-textarea {
        flex: 1;
        
        :deep(.el-textarea__inner) {
          height: 100% !important;
          border: none;
          border-radius: 0;
          box-shadow: none;
          font-family: 'Courier New', monospace;
          font-size: 14px;
          line-height: 1.6;
          resize: none;
        }
      }
    }
  }

  .preview-panel .markdown-preview,
  .markdown-preview {
    flex: 1;
    min-height: 480px;
    padding: 20px;
    background-color: #fff;
    overflow-y: auto;
    
    :deep(h1) {
      font-size: 24px;
      margin: 20px 0 15px;
      padding-bottom: 10px;
      border-bottom: 1px solid #eee;
    }

    :deep(h2) {
      font-size: 20px;
      margin: 18px 0 12px;
      padding-bottom: 8px;
      border-bottom: 1px solid #f0f0f0;
    }

    :deep(h3) {
      font-size: 18px;
      margin: 16px 0 10px;
    }

    :deep(h4) {
      font-size: 16px;
      margin: 14px 0 8px;
    }

    :deep(p) {
      margin: 8px 0;
      line-height: 1.8;
    }

    :deep(ul), :deep(ol) {
      margin: 10px 0;
      padding-left: 25px;
    }

    :deep(li) {
      margin: 5px 0;
      line-height: 1.6;
    }

    :deep(blockquote) {
      margin: 10px 0;
      padding: 10px 15px;
      border-left: 4px solid #409eff;
      background-color: #f4f4f5;
    }

    :deep(code) {
      padding: 2px 6px;
      background-color: #f4f4f5;
      border-radius: 3px;
      font-family: 'Courier New', monospace;
      font-size: 14px;
    }

    :deep(pre) {
      margin: 10px 0;
      padding: 15px;
      background-color: #282c34;
      color: #abb2bf;
      border-radius: 4px;
      overflow-x: auto;

      code {
        background: none;
        padding: 0;
        color: inherit;
      }
    }

    :deep(table) {
      width: 100%;
      margin: 15px 0;
      border-collapse: collapse;

      th, td {
        padding: 8px 12px;
        border: 1px solid #ddd;
      }

      th {
        background-color: #f4f4f5;
        font-weight: bold;
      }
    }

    :deep(hr) {
      margin: 20px 0;
      border: none;
      border-top: 1px solid #e4e7ed;
    }

    .empty-text {
      color: #909399;
      text-align: center;
      padding: 50px 0;
    }

    .error-text {
      color: #f56c6c;
      text-align: center;
      padding: 50px 0;
    }
  }

  .collapsible-card {
    .card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      user-select: none;
      margin: -20px -20px 0 -20px;
      padding: 15px 20px;
      border-bottom: 1px solid #f0f0f0;
      transition: background-color 0.2s;

      &:hover {
        background-color: #f5f7fa;
      }

      h3 {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
    color: #303133;
      }

      .collapse-icon {
        font-size: 16px;
        color: #909399;
        transition: transform 0.3s ease;

        &.collapsed {
          transform: rotate(-90deg);
        }
      }
    }

    .card-content {
      padding-top: 15px;
    }
  }

  .markdown-help {
    padding: 0 15px 15px;
    font-size: 14px;

    h4 {
      margin: 10px 0;
      color: #303133;
    }

    p {
      margin: 8px 0;
      color: #606266;
    }

    small {
      color: #909399;
    }
  }

  .recent-list {
    .recent-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px;
      border-bottom: 1px solid #f0f0f0;
      transition: background-color 0.2s;
      gap: 12px;
      
      &:hover {
        background-color: #f5f7fa;
      }

      &:last-child {
        border-bottom: none;
      }

      .item-name {
        flex: 1;
        font-weight: 500;
        color: #303133;
        font-size: 14px;
        line-height: 1.5;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .item-meta {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 12px;
        color: #909399;
        flex-shrink: 0;

        .item-source {
          display: inline-flex;
          align-items: center;
          padding: 2px 8px;
          background-color: #f0f0f0;
          border-radius: 3px;
    color: #606266;
          white-space: nowrap;
        }

        .item-time {
          color: #909399;
          white-space: nowrap;
        }
      }
    }
  }

  :deep(.el-alert) {
    p {
      margin: 4px 0;
    }
  }
}
</style>
